<template>
<div class="an">
  <!-- <h1>管理登录信息</h1> -->
  <el-button type="primary" @click="dialogFormVisible = true" 
    >增加教师登录信息</el-button
  >
  <el-button type="primary" @click="dialogFormVisibles = true" 
    >增加学生登录信息</el-button
  >
  </div>
  <el-dialog
    v-model="dialogFormVisible"
    title="增加教师登录信息"
    @close="qingkong"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="yonghu">
        <el-input v-model="form.yonghu"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="mima">
        <el-input v-model="form.mima" type="password"></el-input>
      </el-form-item>
      <el-form-item label="教师编号" prop="t_bianhao">
        <el-input v-model="form.t_bianhao" :maxlength="6"></el-input>
      </el-form-item>
      <el-form-item label="是否是管理者">
        <el-radio-group v-model="form.guanlizhe" prop="guanlizhe">
          <el-radio label="1"></el-radio>
          <el-radio label="0"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="tianjia('ruleForm')">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog
    v-model="dialogFormVisibles"
    title="增加学生登录信息"
    @close="qingkong1"
  >
    <el-form
      :model="form1"
      :rules="rules1"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="yonghu">
        <el-input v-model="form1.yonghu"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="mima">
        <el-input v-model="form1.mima" type="password"></el-input>
      </el-form-item>
      <el-form-item label="学生学号" prop="s_xuehao">
        <el-input v-model="form1.s_xuehao" :maxlength="6"></el-input>
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button @click="dialogFormVisibles = false">取消</el-button>
        <el-button type="primary" @click="tianjia1('ruleForm')">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog v-model="xiugai" title="修改信息" @close="qingkong">
    <el-form
      :model="form"
      :rules="rules2"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" :label-width="formLabelWidth" prop="yonghu">
        <el-input v-model="form.yonghu" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth" prop="mima">
        <el-input v-model="form.mima" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="教师编号"
        :label-width="formLabelWidth"
        prop="t_bianhao"
      >
        <el-input
          v-model="form.t_bianhao"
          autocomplete="off"
          :maxlength="6"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="学生学号"
        :label-width="formLabelWidth"
        prop="s_xuehao"
      >
        <el-input
          v-model="form.s_xuehao"
          autocomplete="off"
          :maxlength="6"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否是管理者">
        <el-radio-group v-model="form.guanlizhe" prop="guanlizhe">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="xiugai = false">取消</el-button>
        <el-button type="primary" @click="genggai('ruleForm')">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="chakan" title="登录信息详情" @close="closeDialog">
    <el-table :data="xiangqing">
      <el-table-column label="ID" prop="dengluid" width="80"></el-table-column>
      <el-table-column
        label="用户名"
        prop="yonghuming"
        width="130"
      ></el-table-column>
      <el-table-column
        label="用户密码"
        prop="yonghumima"
        width="100"
      ></el-table-column>
      <el-table-column
        label="用户名字"
        prop="jiaoshiname"
        width="100"
      ></el-table-column>
      <el-table-column
        label="教师编号"
        prop="jiaoshibianhao"
        width="130"
      ></el-table-column>
      <el-table-column
        label="是否是管理员"
        prop="guanliyuan"
        width="105"
      ></el-table-column>
      <el-table-column align="right"> </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="chakan = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    v-model="chakanxuesheng"
    title="登录信息详情"
    @close="closeDialog1"
  >
    <el-table :data="xueshengxiangqing">
      <el-table-column label="ID" prop="dengluid" width="80"></el-table-column>
      <el-table-column
        label="用户名"
        prop="yonghuming"
        width="130"
      ></el-table-column>
      <el-table-column
        label="用户密码"
        prop="yonghumima"
        width="100"
      ></el-table-column>
      <el-table-column
        label="用户名字"
        prop="xueshengname"
        width="100"
      ></el-table-column>
      <el-table-column
        label="学生编号"
        prop="xueshengxuehao"
        width="100"
      ></el-table-column>
      <el-table-column align="right"> </el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="chakanxuesheng = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <el-table :data="tableData.slice((currentPage4 - 1) * size, currentPage4 * size)">
    <el-table-column label="ID" prop="id" width="180"></el-table-column>
    <el-table-column label="用户名" prop="yonghu" width="180"></el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="mini" placeholder="输入用户名关键字后单击回车搜索" @keyup.enter="mohuchaxun"/>
      </template>
      <template #default="scope">
        <el-button
          size="mini"
          v-if="
            (scope.row.t_bianhao != null && scope.row.s_xuehao === null) ||
            (scope.row.t_bianhao != '' && scope.row.s_xuehao === '')
          "
          @click="(chakan = true), chaxunbianhao(scope.row.t_bianhao)"
          >查看教师登录信息</el-button
        >
        <el-button
          size="mini"
          v-if="
            (scope.row.t_bianhao === null && scope.row.s_xuehao != null) ||
            (scope.row.t_bianhao === '' && scope.row.s_xuehao != '')
          "
          @click="(chakanxuesheng = true), chaxunxuehao(scope.row.s_xuehao)"
          >查看学生登录信息</el-button
        >
        <el-button size="mini" type="primary" @click="gai(scope.row)"
          >修改</el-button
        >
        <el-button size="mini" type="danger" @click="shanchu(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
   <div class="block">
    <span class="demonstration"></span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10,25]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
const axios = require("axios");
// import { defineComponent, reactive, toRefs, ref } from "vue";
export default {
  name: "GLbanji",
  data() {
    return {
       total: 0,
      size: 10,
      currentPage4: 1,
      tb: "",
      value1: "",
      value2: "",
      dialogFormVisible: false,
      dialogFormVisibles: false,
      chakan: false,
      chakanxuesheng: false,
      xiugai: false,
      form: {
        yonghu: "",
        mima: "",
        t_bianhao: "",
        s_xuehao: "",
        guanlizhe: "",
        delivery: false,
      },
      form1: {
        yonghu: "",
        mima: "",
        s_xuehao: "",
        delivery: false,
      },
      formLabelWidth: "120px",
      rules: {
        yonghu: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 9,
            message: "长度在 3 到 9 个字符",
            trigger: "blur",
          },
        ],
        mima: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 9,
            message: "长度在 3 到 9 个字符",
            trigger: "blur",
          },
        ],
        t_bianhao: [
          { required: true, message: "请输入教师编号", trigger: "blur" },
          {
            min: 6,
            max: 6,
            message: "长度是 6 个字符",
            trigger: "blur",
          },
        ],
      },
      rules1: {
        yonghu: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 9,
            message: "长度在 3 到 9 个字符",
            trigger: "blur",
          },
        ],
        mima: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 9,
            message: "长度在 3 到 9 个字符",
            trigger: "blur",
          },
        ],
        s_xuehao: [
          { required: true, message: "请输入学生学号", trigger: "blur" },
          {
            min: 6,
            max: 6,
            message: "长度是 6 个字符",
            trigger: "blur",
          },
        ],
      },
      rules2: {
        yonghu: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 9,
            message: "长度在 3 到 9 个字符",
            trigger: "blur",
          },
        ],
        mima: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 9,
            message: "长度在 3 到 9 个字符",
            trigger: "blur",
          },
        ],
      },
      tableData: [
        {
          id: "",
          yonghu: "",
          mima: "",
          t_bianhao: "",
          s_xuehao: "",
          guanlizhe: "",
        },
      ],
      xiangqing: [],
      xueshengxiangqing: [],
      search: "",
    };
  },
  methods: {
    handleSizeChange: function (size) {
      this.size = size;
    },
    handleCurrentChange: function (currentPage4) {
      this.currentPage4 = currentPage4;
    },
    gai(g) {
      this.xiugai = true;
      this.form = g;
    },
    //关闭弹框的事件
    closeDialog() {
      this.xiangqing = []; //清空数据
    },
    closeDialog1() {
      this.xueshengxiangqing = []; //清空数据
    },
    qingkong() {
      this.form = {
        yonghu: "",
        mima: "",
        t_bianhao: "",
        guanlizhe: "",
      };
    },
    qingkong1() {
      this.form1 = {
        yonghu: "",
        mima: "",
        s_xuehao: "",
      };
    },
    mohuchaxun(){
        let _this = this;
      axios
        .get("https://localhost:44391/api/guanliyuan/mohudenglu", {
          params: {
            mohu: _this.search,
          },
        })
        .then(function (response) {
          console.log(response);
          _this.tableData = response.data;
        });
    },
    shanchu(id) {
      let _this = this;
      axios
        .get("https://localhost:44391/api/guanliyuan/shanchudenglu", {
          params: {
            id: id,
          },
        })
        .then(function (response) {
          console.log(response);
          if (response.data >= 1) {
            _this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
            });
          } else {
            _this.$notify({
              title: "警告",
              message: "删除失败",
              type: "warning",
            });
          }
          _this.chaxun();
        });
    },
    tianjia1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          // this.form.s_xuehao = parseInt(this.form.s_xuehao);
          console.log(this.form1);
          axios
            .get("https://localhost:44391/api/zhuce/chaxunxh", {
              params: {
                s_xuehao: this.form1.s_xuehao,
              },
            })
            .then(function (response) {
              console.log(response);
              debugger;
              if (response.data === "") {
                _this.$notify({
                  title: "警告",
                  message: "未查询到学生学号，请检查学生学号",
                  type: "warning",
                });
              }
              if (response.data != "") {
                axios
                  .post(
                    "https://localhost:44391/api/denglu/zhucexuesheng",
                    _this.form1
                  )
                  .then(function (response) {
                    console.log(response);
                    if (response.data >= 1) {
                      _this.$notify({
                        title: "成功",
                        message: "添加成功",
                        type: "success",
                      });
                      _this.dialogFormVisibles = false;
                    } else {
                      _this.$notify({
                        title: "警告",
                        message: "添加失败",
                        type: "warning",
                      });
                    }
                    _this.chaxun();
                  });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    tianjia(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          // this.form.t_bianhao = parseInt(this.form.t_bianhao);
          console.log(this.form);
          axios
            .get("https://localhost:44391/api/zhuce/chaxunbianhao", {
              params: {
                t_bianhao: this.form.t_bianhao,
              },
            })
            .then(function (response) {
              console.log(response);
              if (response.data === "") {
                _this.$notify({
                  title: "警告",
                  message: "未查询到教师编号，请检查教师编号",
                  type: "warning",
                });
              }
              if (response.data != "") {
                axios
                  .post(
                    "https://localhost:44391/api/denglu/zhucejiaoshi",
                    _this.form
                  )
                  .then(function (response) {
                    console.log(response);
                    if (response.data >= 1) {
                      _this.$notify({
                        title: "成功",
                        message: "添加成功",
                        type: "success",
                      });
                      // _this.dialogFormVisible = false;
                      _this.dialogFormVisible = false;
                    } else {
                      _this.$notify({
                        title: "警告",
                        message: "添加失败",
                        type: "warning",
                      });
                    }
                    _this.chaxun();
                  });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // genggai(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       let _this = this;
    //       // this.form.t_age = parseInt(this.form.t_age);
    //       console.log(this.form);
    //       // axios
    //       //   .get("https://localhost:44391/api/zhuce/chaxunNumber", {
    //       //     params: {
    //       //       bianhao:
    //       //         _this.form.t_bianhao != "" && _this.form.t_bianhao != null
    //       //           ? this.form.t_bianhao
    //       //           : this.form.s_xuehao,
    //       //       shenfen:
    //       //         _this.form.t_bianhao != "" && _this.form.t_bianhao != null
    //       //           ? 1
    //       //           : 0,
    //       //     },
    //       //   })
    //       //   .then((response) => {
    //       //     console.log(response);
    //       //     if (response.data === 0) {
    //       //       _this.$notify({
    //       //         title: "警告",
    //       //         message: _this.form.t_bianhao != "" && _this.form.t_bianhao != null?"未查询教师编号！请检查教师编号！":"未查询到学生学号，请检查学生学号",
    //       //         type: "warning",
    //       //       });
    //       //     }
    //       //     else {
    //       //       axios
    //       //         .post(
    //       //           "https://localhost:44391/api/guanliyuan/xiugaidenglu",
    //       //           _this.form
    //       //         )
    //       //         .then(function (response) {
    //       //           console.log(response);
    //       //           if (response.data >= 1) {
    //       //             _this.$notify({
    //       //               title: "成功",
    //       //               message: "修改成功",
    //       //               type: "success",
    //       //             });
    //       //             _this.xiugai = false;
    //       //             _this.chaxun();
    //       //           } else {
    //       //             _this.$notify({
    //       //               title: "警告",
    //       //               message: "修改失败",
    //       //               type: "warning",
    //       //             });
    //       //           }
    //       //         });
    //       //     }
    //       //   });
    //       if (_this.form.t_bianhao != "" && _this.form.t_bianhao != null) {
    //         axios
    //           .get("https://localhost:44391/api/zhuce/chaxunbianhao", {
    //             params: {
    //               t_bianhao: this.form.t_bianhao,
    //             },
    //           })
    //           .then(function (response) {
    //             console.log(response);
    //             if (response.data === "") {
    //               _this.$notify({
    //                 title: "警告",
    //                 message: "未查询教师编号！请检查教师编号！",
    //                 type: "warning",
    //               });
    //             }
    //             if (response.data != "") {
    //               axios
    //                 .post(
    //                   "https://localhost:44391/api/guanliyuan/xiugaidenglu",
    //                   _this.form
    //                 )
    //                 .then(function (response) {
    //                   console.log(response);
    //                   if (response.data >= 1) {
    //                     _this.$notify({
    //                       title: "成功",
    //                       message: "修改成功",
    //                       type: "success",
    //                     });
    //                     _this.xiugai = false;
    //                     _this.chaxun();
    //                   } else {
    //                     _this.$notify({
    //                       title: "警告",
    //                       message: "修改失败",
    //                       type: "warning",
    //                     });
    //                   }
    //                 });
    //             }
    //           });
    //       } else {
    //         axios
    //           .get("https://localhost:44391/api/zhuce/chaxunxh", {
    //             params: {
    //               s_xuehao: this.form.s_xuehao,
    //             },
    //           })
    //           .then(function (response) {
    //             console.log(response);
    //             if (response.data === "") {
    //               _this.$notify({
    //                 title: "警告",
    //                 message: "未查询到学生学号，请检查学生学号",
    //                 type: "warning",
    //               });
    //             }
    //             if (response.data != "") {
    //               axios
    //                 .post(
    //                   "https://localhost:44391/api/guanliyuan/xiugaidenglu",
    //                   _this.form
    //                 )
    //                 .then(function (response) {
    //                   console.log(response);
    //                   if (response.data >= 1) {
    //                     _this.$notify({
    //                       title: "成功",
    //                       message: "修改成功",
    //                       type: "success",
    //                     });
    //                     _this.xiugai = false;
    //                     _this.chaxun();
    //                   } else {
    //                     _this.$notify({
    //                       title: "警告",
    //                       message: "修改失败",
    //                       type: "warning",
    //                     });
    //                   }
    //                 });
    //             }
    //           });
    //       }
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    genggai(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          // this.form.t_age = parseInt(this.form.t_age);
          console.log(this.form);
          if (_this.form.t_bianhao != "" && _this.form.t_bianhao != null) {
            axios
              .get("https://localhost:44391/api/zhuce/chaxunbianhao", {
                params: {
                  t_bianhao: this.form.t_bianhao,
                },
              })
              .then(function (response) {
                console.log(response);
                if (response.data === "") {
                  _this.$notify({
                    title: "警告",
                    message: "未查询教师编号！请检查教师编号！",
                    type: "warning",
                  });
                }
                if (response.data != "") {
                  axios
                    .post(
                      "https://localhost:44391/api/guanliyuan/xiugaidenglu",
                      _this.form
                    )
                    .then(function (response) {
                      console.log(response);
                      if (response.data >= 1) {
                        _this.$notify({
                          title: "成功",
                          message: "修改成功",
                          type: "success",
                        });
                        _this.xiugai = false;
                        _this.chaxun();
                      } else {
                        _this.$notify({
                          title: "警告",
                          message: "修改失败",
                          type: "warning",
                        });
                      }
                    });
                }
              });
          } else {
            axios
              .get("https://localhost:44391/api/zhuce/chaxunxh", {
                params: {
                  s_xuehao: this.form.s_xuehao,
                },
              })
              .then(function (response) {
                console.log(response);
                if (response.data === "") {
                  _this.$notify({
                    title: "警告",
                    message: "未查询到学生学号，请检查学生学号",
                    type: "warning",
                  });
                }
                if (response.data != "") {
                  axios
                    .post(
                      "https://localhost:44391/api/guanliyuan/xiugaidenglu",
                      _this.form
                    )
                    .then(function (response) {
                      console.log(response);
                      if (response.data >= 1) {
                        _this.$notify({
                          title: "成功",
                          message: "修改成功",
                          type: "success",
                        });
                        _this.xiugai = false;
                        _this.chaxun();
                      } else {
                        _this.$notify({
                          title: "警告",
                          message: "修改失败",
                          type: "warning",
                        });
                      }
                    });
                }
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    chaxun() {
      let _this = this;
      console.log(_this.tb);
      if (_this.tb == "") {
        _this.$router.push({ path: "/" });
      } else {
        axios
          .get("https://localhost:44391/api/guanliyuan/chaxundenglu")
          .then(function (response) {
            console.log(response.data);
            _this.tableData = response.data;
             _this.total = response.data.length;
          });
      }
    },
    chaxunbianhao(bianhao) {
      let _this = this;
      axios
        .get("https://localhost:44391/api/guanliyuan/chaxunjiaoshibianhao", {
          params: {
            jiaoshibianhao: bianhao,
          },
        })
        .then(function (chaxun) {
          console.log(chaxun.data);
          //   _this.xiangqing = chaxun.data;
          //将数据类型转换成数组，push到数组里
          _this.xiangqing.push(chaxun.data);
        });
    },
    chaxunxuehao(xuehao) {
      let _this = this;
      axios
        .get("https://localhost:44391/api/guanliyuan/chaxunxuesheng", {
          params: {
            xueshengxuehao: xuehao,
          },
        })
        .then(function (chaxun) {
          console.log(chaxun.data);
          //   _this.xiangqing = chaxun.data;
          //将数据类型转换成数组，push到数组里
          _this.xueshengxiangqing.push(chaxun.data);
        });
    },
  },
  mounted() {
    this.tb = this.$store.state.t_bianhao;
    this.chaxun();
  },
};
</script>

<style scoped>
h1 {
  font-size: 40px;
}
</style>